<template>
  <el-card style="margin-bottom: 20px;" class="navCard">
    <el-tabs v-model="keys" @tab-click="handleClick">
      <el-tab-pane label="客服设置" name="siteConfig.set-customer-service">
      </el-tab-pane>
      <el-tab-pane label="Token对接" name="siteConfig.set-tokens">
      </el-tab-pane>
    </el-tabs>
  </el-card>
  <router-view></router-view>
</template>

<script>
import { useRoute, useRouter } from 'vue-router'
import { getCurrentInstance, reactive, toRefs } from 'vue'
export default {
  name: 'siteConfig',
  setup(){
    let { proxy } = getCurrentInstance()
    let router = useRouter()
    let route = useRoute()

    const state = reactive({
      keys:route.matched[2].name
    })

    const handleClick = (aa) => {
      router.push({ name :aa.props.name})
    }

    return {
      ...toRefs(state),
      handleClick
    }
  }
}
</script>

<style lang="less" scoped>
.navCard{
  &:deep(.el-card__body){
    padding: 5px 20px 1px;
    .el-tabs__header{
      margin-bottom: 0;
    }
    .el-tabs__nav-wrap::after{
      display: none;
    }
  }
}
</style>
